import 'package:card_topia/common_widget/my_app_bar.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'build_cards_page.dart';



class MyCardsPage extends StatefulWidget {
  const MyCardsPage({super.key});

  @override
  State<MyCardsPage> createState() => _MyCardsPageState();
}

class _MyCardsPageState extends State<MyCardsPage> with TickerProviderStateMixin{
  late final TabController _tabController;
  final List<String> _tabs = [
    "全部",
    "三国演义",
    "游戏王",
    "黑色四叶草",

  ];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(showLeading: true,title: "我的卡片",actions: [
        ActionItem(iconData: IconsaxOutline.add_circle,onTap: (){

        },),
        ActionItem(iconData: IconsaxOutline.graph,onTap: (){

        },),

        ActionItem(iconData: IconsaxOutline.search_normal_1,onTap: (){

        },),
      ],),
      body: Column(
        children: [
          Container(
            alignment: Alignment.centerLeft,
            child: TabBar(
              controller: _tabController,
              onTap: (index) {

              },
              isScrollable: true,
              indicator: const BoxDecoration(
                  color: Colors.transparent
              ),
              labelStyle: TextStyle(
                fontWeight: FontWeight.bold,
              ),
              unselectedLabelStyle: TextStyle(
                fontWeight: FontWeight.normal,
              ),
              labelColor: textColor,
              unselectedLabelColor: unSelectColor,
              tabs: _tabs.map((e) => Container(
                  height: 32.w,
                  child: Text(e,style: TextStyle(fontSize: 14.sp),)),).toList(),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                BuildCardsPage(key: ValueKey("JOJO"),),
                Center(
                  child: Text("JOJO"),
                ),
                BuildCardsPage(key: ValueKey("DIO"),),
                Center(
                  child: Text("JOJO"),
                ),
              ],
            ),
          )
        ],
      ),
      // body: NestedScrollView(
      //   headerSliverBuilder: (context,a){
      //     return [
      //       SliverAppBar(
      //         automaticallyImplyLeading: false,
      //         toolbarHeight: 40.w,
      //         pinned: true,
      //         floating: true,
      //         elevation: 0,
      //         backgroundColor: scaffoldBackgroundColor,
      //         titleSpacing: 0,
      //         title: Container(
      //           alignment: Alignment.centerLeft,
      //           child: TabBar(
      //             controller: _tabController,
      //             isScrollable: true,
      //             indicator: const BoxDecoration(
      //               color: Colors.transparent
      //             ),
      //             labelStyle: TextStyle(
      //               fontWeight: FontWeight.bold,
      //             ),
      //             unselectedLabelStyle: TextStyle(
      //               fontWeight: FontWeight.normal,
      //             ),
      //             labelColor: textColor,
      //             unselectedLabelColor: unSelectColor,
      //
      //             tabs: _tabs.map((e) => Container(
      //                 height: 32.w,
      //                 child: Text(e,style: TextStyle(fontSize: 14.sp),)),).toList(),
      //           ),
      //         ),
      //       )
      //     ];
      //   },
      //   body: TabBarView(
      //     controller: _tabController,
      //     children: _tabs.map((e) => BuildCardsPage(key: ValueKey("$e"),)).toList(),
      //   ),
      // ),
    );
  }
}

///Action Item
class ActionItem extends StatelessWidget {
  const ActionItem({super.key, required this.iconData, required this.onTap});
  final IconData iconData;
  final VoidCallback onTap;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.only(right: 16.w),
        width: 40.w,
        child: Icon(iconData,size: 22.w,color: textColor,),
      ),
    );
  }
}
